@import '../mixins';

.filter-selection-text-box {
  display: flex;
  flex-direction: column;
  margin-left: var(--spacing);
  min-width: 0;

  border: var(--contrast-border);
  border-radius: var(--border-radius);
  background: var(--box-background-color);
  color: currentColor;
  font-size: var(--font-size);
  font-family: var(--font-family-sans-serif);

  &.focus-within {
    @include textboxish-focus-styles;
  }
  
  .text-box-component {
    input {
      padding-left: 40px;
      border: none;
      background: none;
      box-shadow: none;

      &:focus {
        outline: none;
        border: none;
        box-shadow: none;
      }
    }
  }

  .input-group {
    position: relative;

    > button {
      position: absolute;
      z-index: 1; // make sure the button is on top of the input
  
      padding: 3px 2px;
      padding-left: 5px;
      margin-top: 1px;
      border: none;
      height: auto;
      background: none;
  
      &:focus-visible {
        outline-offset: 0px;
      }
  
      &:hover {
        color: var(--text-secondary-color);
        border: none;
        box-shadow: none;
        background: none;
      }
    }
  }

  .filter-options-applied {
    padding-bottom: 1px;

    button {
      border-radius: var(--border-radius);
      border: 1px solid var(--co-author-tag-border-color);
      background: var(--co-author-tag-background-color);
      padding: 2px 5px;
      margin: 0px 2px;
      cursor: pointer;
      height: auto;
      font-size: var(--font-size-sm);

      .octicon {
        height: 12px;
        width: 12px;
        margin-bottom: 1.5px;
        margin-left: 2px;
      }
    }
  }
  
}
